import React from 'react';
import { Button } from 'tdesign-react';
import { LogoGithubIcon, SettingIcon } from 'tdesign-icons-react';
import { useAppDispatch, useAppSelector } from 'modules/store';
import { selectGlobal, toggleSetting } from 'modules/global';
import LightFullHISTLogo from 'assets/image/light-logo-max-hist.png';
import DarkFullHISTLogo from 'assets/image/dark-logo-max-hist.png';
import Style from './index.module.less';

export default function Header() {
  const dispatch = useAppDispatch();

  const navToGitHub = () => {
    window.open('https://gitee.com/tmkbk/software-project');
  };

  const toggleSettingPanel = () => {
    dispatch(toggleSetting());
  };
  const globalState = useAppSelector(selectGlobal);
  return (
    <div>
      <header className={Style.loginHeader}>
        <img src={globalState.theme === 'dark' ? DarkFullHISTLogo : LightFullHISTLogo} alt='HISTLogo' />
        <div className={Style.operationsContainer}>
          <Button
            className={Style.operationsButton}
            theme='default'
            shape='square'
            variant='text'
            onClick={navToGitHub}
          >
            <LogoGithubIcon className={Style.icon} />
          </Button>
          <Button
            className={Style.operationsButton}
            theme='default'
            shape='square'
            variant='text'
            onClick={toggleSettingPanel}
          >
            <SettingIcon className={Style.icon} />
          </Button>
        </div>
      </header>
    </div>
  );
}
